import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Platform,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    StatusBar,
    Linking,
    ActivityIndicator,
    DeviceEventEmitter,
    TextInput,
} from 'react-native';

import { getImgUrl } from '../../utils/ComFunction'


const screenW = Dimensions.get('window').width;
const isIos = Platform.OS == 'ios';
/**
 * 附件图片
 */
export default class OtherImage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            otherPics: [],
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {

    }

    componentDidMount() {
        if (this.props.picsData) {
            //处理图片数据
            let otherPics = this.props.picsData

            let temp = []
            otherPics.map((item, index) => {
                let obj = {
                    picUrl: item,
                    check: false
                }
                temp.push(obj)
            })
            this.setState({
                otherPics: temp
            },function(){
                this.showPreSelectData()
            })
        }
    }

    showPreSelectData(){
        let that = this
        if(this.props.fileList && this.props.fileList.length > 0){
            let fileList = this.props.fileList

            fileList.map((item,index) => {
                if(item.title.indexOf('其他图片') != -1){
                    that.initOtherPics(item.value)
                }
            })

        }
    }

    initOtherPics(otherPics){
        let otherPicsStr = JSON.stringify(otherPics)

        let temp = []
        let otherCertPics = this.state.otherPics
        otherCertPics.map((item, index) => {

            if(otherPicsStr.indexOf(item.picUrl) != -1){
                item.check = true
            }
            temp.push(item)
        })

        this.setState({
            otherPics: temp
        })
    }

    render() {
        return (
            <View style={styles.container}>

                <Text style={styles.titleText}>选择其他照片，最多30张</Text>

                <View style={styles.imgContain}>

                    {this.state.otherPics && this.state.otherPics.length > 0 ? this.state.otherPics.map((item, index) => {
                        return (
                            <TouchableOpacity
                                key={index}
                                onPress={() => {
                                    let temp = this.state.otherPics
                                    temp[index].check = !temp[index].check
                                    this.setState({
                                        otherPics: temp
                                    })
                                }} >
                                <Image style={styles.imgStyle} source={{ uri: getImgUrl(item.picUrl) }}></Image>

                                <Image style={styles.imgCheckStyle} source={{ uri: item.check ? 'icon_selector_checked_2' : 'icon_selector_unchecked_2' }}></Image>
                            </TouchableOpacity>
                        )
                    })
                    :
                    <Text style={styles.notUploadText}>未上传其他证件照片</Text>
                    }
                </View>

            </View>
        );
    }

    getResult() {
        let otherPics = []
        this.state.otherPics.map((item, index) => {
            if (item.check) {             
                otherPics.push(item.picUrl)
            }
        })
        let othervalue = {
            title:'其他图片('+otherPics.length+')',
            value: otherPics
        }

        return othervalue
    }

}

const styles = StyleSheet.create({
    container: {
        width: screenW,
        flex: 1,
        flexDirection: 'column',
        marginTop: 10,
        backgroundColor: '#ffffff',
        paddingLeft: 16,
        paddingRight: 16
    },

    titleText: {
        fontSize: 14,
        color: '#222222',
        marginTop: 16
    },

    imgContain: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },

    imgStyle: {
        width: 80,
        height: 80,
        marginRight: 10,
        marginTop: 10,
        borderRadius: 4,
    },

    imgCheckStyle: {
        width: 20,
        height: 20,
        position: 'absolute',
        right: 14,
        top: 14
    },
    notUploadText: {
        fontSize: 14,
        color: '#999999',
        marginTop: 10
    },

})